<template>
  <div style="min-height: 300px">
    <el-col :span="10">
      <div class="block">
        <p style="line-height: 30px">日志文件列表</p>
        <el-tree :data="data" node-key="id" default-expand-all
                 :expand-on-click-node="false" :render-content="toRenderContent">
        </el-tree>
      </div>
    </el-col>
    <el-col :span="14">
      <div style="margin-left: 10px">
        <div style="float: left;margin-top: 10px;">
          <label>日志文件名称:</label>
          <span style="padding-left: 10px;">{{ logFileName }}</span>
        </div>
        <div style="float: right;margin-bottom: 5px;">
          <label>自动刷新:</label>
          <el-select v-model="replaceTime" placeholder="请选择" filterable @change="changeReplace"
                     style="margin-left: 10px;width: 100px">
            <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="float: right;margin-bottom: 5px;margin-right: 20px;">
          <label>日志显示行数:</label>
          <el-select v-model="logShowRow" placeholder="请选择" filterable @change="changeShowRow"
                     style="margin-left: 10px;width: 100px">
            <el-option v-for="item in rowList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-cloak>
          <el-input type="textarea" :rows="25" :disabled="true" v-model="runLog"/>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script>
import CRUD, {crud} from '@crud/crud'
import bizAgentApi from '@/api/agent/bizAgent'
import {downloadFile} from '@/utils/index'

export default {
  name: 'serverLog',
  mixins: [crud()],
  props: {
    agentInfo: Object,
    default: null
  },
  data: function () {
    return {
      data: [],
      runLog: null,
      replaceTime: 0,
      appType: 'hdrs-agent',
      logFileName: null,
      logShowRow: 100,
      selectFileData: null,
      timer: null,
      rowList: [
        {
          value: 100,
          label: '100行'
        }, {
          value: 200,
          label: '200行'
        }, {
          value: 300,
          label: '300行'
        }, {
          value: 500,
          label: '500行'
        }, {
          value: 1000,
          label: '1000行'
        },
      ],
      timeList: [
        {
          value: 0,
          label: '不刷新'
        }, {
          value: 2,
          label: '2秒'
        }, {
          value: 5,
          label: '5秒'
        }, {
          value: 10,
          label: '10秒'
        }, {
          value: 15,
          label: '15秒'
        }, {
          value: 30,
          label: '30秒'
        }, {
          value: 60,
          label: '60秒'
        }
      ]
    }
  },
  created() {
    this.initFileLogList();
  },
  methods: {
    initFileLogList() {
      let dataForm = {
        appType: this.appType,
        agentHost: this.agentInfo.agentIp,
        agentPort: this.agentInfo.agentPort,
        agentCode: this.agentInfo.agentCode,
        agentName: this.agentInfo.agentName,
        version: this.agentInfo.serverVer
      }
      const loading = this.$loading({
        lock: true,
        text: '正在获取远程日志目录，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      bizAgentApi.getLogFileList(dataForm).then(res => {
        if (res.code === "200") {
          this.data = JSON.parse(JSON.stringify(res.rsd));
        } else {
          this.crud.notify('获取远程日志目录失败:' + res.msg, CRUD.NOTIFICATION_TYPE.ERROR)
        }
        loading.close();
      }).catch(() => {
        loading.close();
      })
    },
    toRenderContent(h, {node, data, store}) {
      if (data.fileType === 'FILE') {
        return (
          < div class="custom-tree-node">
                        < span>
                           <i class="el-icon-document"></i>
                           <span style="padding-left: 4px;">{data.fileName} < /span>
                        < /span>
            < span>{data.fileSize}< /span>
            < span>{data.updateTime}< /span>
            <span>
                          <el-button size="mini" type="text" on-click={() => this.lookFileLog(data)}>查看</el-button>
                          <el-button size="mini" type="text" on-click={() => this.downFileLog(data)}>下载</el-button>
                        </span>
          < /div>);
      } else {
        return (
          < div class="custom-tree-node">
                        < span>
                        <i class="el-icon-document"></i>
                        <span style="padding-left: 4px;">{data.fileName} < /span>
                        < /span>
            <span>
                    <el-button size="mini" type="text" on-click={() => this.downFileLog(data)}>下载</el-button>
                    </span>
          < /div>);
      }

    },
    downFileLog(data) {
      let dataForm = {
        appType: this.appType,
        agentHost: this.agentInfo.agentIp,
        agentCode: this.agentInfo.agentCode,
        agentName: this.agentInfo.agentName,
        version: this.agentInfo.serverVer,
        logPath: data.filePath
      }
      this.logFileName = data.fileName;
      const loading = this.$loading({
        lock: true,
        text: '正在获取远程日志文件，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      bizAgentApi.downLogFile(dataForm).then(res => {
        downloadFile(res, data.fileName, 'zip')
        loading.close();
      }).catch(() => {
        loading.close();
      })
    },
    lookFileLog(data) {
      this.selectFileData = data;
      let logModel = {
        logPath: data.filePath,
        logLine: this.logShowRow
      }
      let dataForm = {
        appType: this.appType,
        agentHost: this.agentInfo.agentIp,
        agentPort: this.agentInfo.agentPort,
        agentCode: this.agentInfo.agentCode,
        agentName: this.agentInfo.agentName,
        version: this.agentInfo.serverVer,
        dataMap: logModel
      }
      this.logFileName = data.fileName;
      // this.runLog = "正在获取远程日志文件内容，请稍等...";
      bizAgentApi.getLogFileInfo(dataForm).then(res => {
        if (res.code === "200") {
          let logContent = "";
          if (res.rsd instanceof Array) {
            res.rsd.reverse().forEach(val => {
              logContent += val + '\n';
            })
          }
          this.runLog = logContent;
        } else {
          this.crud.notify('正在获取远程日志内容失败:' + res.msg, CRUD.NOTIFICATION_TYPE.ERROR)
        }
      }).catch(() => {
        // this.runLog = "";
      })
    },
    changeReplace() {
      if (this.logFileName != null && this.logFileName != '') {
        this.clearReflash();
        if (this.replaceTime > 0) {
          this.timer = setInterval(() => {
            this.lookFileLog(this.selectFileData)
          }, this.replaceTime * 1000);
        }
      } else {
        this.replaceTime = 0;
        this.crud.notify('请选择查看的日志文件！', CRUD.NOTIFICATION_TYPE.WARNING)
      }
    },
    changeShowRow() {
      if (this.logFileName != null && this.logFileName != '') {
        this.lookFileLog(this.selectFileData)
      } else {
        this.logShowRow = 100;
        this.crud.notify('请选择查看的日志文件！', CRUD.NOTIFICATION_TYPE.WARNING)
      }
    },
    clearReflash() {
      if (this.timer != null) {
        clearInterval(this.timer);
      }
    },
  }
}
</script>
<style type="text/css">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

[v-cloak] {
  display: none;
}
</style>
